<template>
	<view class="myPage">
		<!-- 用户头部信息 -->
		<view class="header" hover-start-time=15 hover-stay-time=200 hover-class="bgcolor" @tap="login">
			<image :src="userInfo.headerImage"></image>
			<view class="nickNameNum">
				<text>{{userInfo.nickName}}</text>
				<text>总帖子 {{userInfo.totalNum}}&emsp;今日发帖 {{userInfo.todayNum}}</text>
			</view>
			<text class="iconfont icon-jinru headerJinru"></text>
		</view>
		<!-- 详情列表消息 -->
		<view class="detailList">
			<view v-for="(item,index) in detailList" :key="index" hover-start-time=15 hover-stay-time=200 hover-class="bgcolor">
				<text>{{item.number}}</text>
				<text>{{item.name}}</text>
			</view>
		</view>

		<!-- 广告位 -->
		<view class="advertisement">
			<image :src="advertisement" mode="aspectFill"></image>
		</view>

		<!-- 历史/认证/帖子 -->
		<view class="historyPost" v-for="(item,index) in historyPost" :key="index" hover-start-time=15 hover-stay-time=200
		 hover-class="bgcolor" @click="open(index)">
			<text class="iconfont" :class="item.icon"></text>
			<text>{{item.name}}</text>
			<text class="iconfont icon-jinru"></text>
		</view>
	</view>
</template>

<script>
	import Vuex from "vuex";
	export default {
		computed: {
			...Vuex.mapState(["systemInfo"])
		},
		data() {
			return {
				userInfo: {
					headerImage: "https://picsum.photos/100/100?random=1",
					nickName: "操作",
					totalNum: 15,
					todayNum: 10
				},
				detailList: [{
					name: "帖子",
					number: 1
				}, {
					name: "动态",
					number: 5
				}, {
					name: "评论",
					number: 17
				}, {
					name: "粉丝",
					number: 40
				}],
				advertisement: "https://picsum.photos/600/200?random=1",
				historyPost: [{
					icon: "icon-liulan1",
					name: "浏览历史"
				}, {
					icon: "icon-auth",
					name: "社区认证"
				}, {
					icon: "icon-anjianshenhe",
					name: "审核帖子"
				}],
			};
		},
		// 点击右上角分享按钮，跳转页面
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: `../../user/set/set`
			});
		},
		methods: {
			login() {
				uni.navigateTo({
					url: "../../login/login"
				})
			},
			open(index) {
				let url = void 0;
				switch (index) {
					case 0:
						url = `../../history/history`;
						break;
					case 1:
						break;
					default:
						break;
				};
				uni.navigateTo({
					url
				});
			},
		},
	}
</script>

<style lang="scss">
	.header {
		@include flexCenterCenter;
		padding: 20rpx;
		// border-bottom: 1rpx solid #E5E5E5;

		>image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.nickNameNum {
			flex: 1;
			display: flex;
			flex-direction: column;

			>text {
				&:last-of-type {
					color: #999;
					margin-top: 15rpx;
					font-size: .8rem;
				}
			}
		}

		.headerJinru {
			font-size: 1.3rem;
		}
	}

	.detailList {
		display: flex;
		padding: 20rpx;

		>view {
			flex: 1;
			@include flexCenterCenter;
			flex-direction: column;

			>text {
				&:first-of-type {
					font-size: 1.15rem;
					letter-spacing: 4rpx;
					font-weight: bolder;
				}

				&:last-of-type {
					margin-top: 15rpx;
					font-size: .9rem;
					color: #ADAEA9;
				}
			}
		}
	}

	// 广告位置
	.advertisement {
		padding: 20rpx;

		>image {
			width: 100%;
			height: 200rpx;
			border-radius: 20rpx;
		}
	}

	// 历史/认证/帖子
	.historyPost {
		padding: 20rpx;
		@include flexCenterCenter;

		>text {
			font-size: 1.11rem;

			&:nth-of-type(2) {
				letter-spacing: 4rpx;
				flex: 1;
				margin-left: 20rpx;
			}

			&:last-of-type {
				color: #ADAEA9;
			}
		}
	}
</style>
